<template>
  <div class="Header">
    <div style="width:40px;height:40px" @click="goBack"><div class="Header-back" ></div></div>
    
    <div class="Header-title">{{ title }}</div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      require: true
    }
  },
  methods:{
      goBack(){
          this.$router.push({
              name: 'home'
          })
      }
  }
};
</script>
<style lang="less" scoped>
.Header {
  width: 100%;
  height: 44px;
  background: #4d86ff;
  position: relative;
  &-back {
    width: 10px;
    height: 10px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%) rotate(-45deg);
  }
  &-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 18px;
    font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
    font-weight: 600;
  }
}
</style>
